<template>
	<view class="container">
		<customHead
			title="红包"
			@headHeight="headHeightCall"
			isShowBackArrow
			:titlePaddingLeft="30"
			color="#fff"
		>
		</customHead>
		<view class="main_content">
			<image class="couponBanner" src="@/static/images/myCenter/myRedpack.png" mode="aspectFill"></image>
			<view class="redpack_list">
				<view class="list_box">
					<view class="title_headLine"></view>
					<view class="text_headLine">
						<text>限时红包</text>
						<text>及时查询</text>
					</view>
					<view class="title_box">
						<view class="title">
							<text class="text1">可用红包：</text>
							<text class="text2">￥</text>
							<text class="text3">0</text>
						</view>
						<view class="notice_desc1">
							<text class="text1">7</text>
							<text class="text2">天内即将到期红包：</text>
							<text class="text3">0</text>
						</view>
						<view class="notice_desc2">
							<view class="left">
								<text class="text4">近30天明细</text>
							</view>
							<view class="right">
								<text>更多</text>
								<u-icon name="arrow-right" color="#9d9d9d" size="16"></u-icon>
							</view>
						</view>
					</view>
					<view class="list">
						<scroll-view scroll-y="true" class="scroll">
							<view></view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headHeight: 0
			};
		},
		methods: {
			headHeightCall (height) {
				this.headHeight = height;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		background-color: #FF5341;
		
		.main_content{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			
			.couponBanner{
				width: 100%;
				height: 500rpx;
			}
			.redpack_list{
				flex: 1;
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 20rpx;
				
				.list_box{
					height: 100%;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 20rpx;
					position: relative;
					
					.title_headLine{
						width: 340rpx;
						height: 60rpx;
						background-color: #ff0000;
						transform: translateY(-24rpx);
						border-bottom-left-radius: 30rpx;
						border-bottom-right-radius: 30rpx;
						transform: perspective(60rpx) rotateX(-6deg);
						transform-origin: center bottom;
					}
					
					.text_headLine{
						display: flex;
						position: absolute;
						top: 6rpx;
						color: #ececec;
					}
					
					
					.title_box{
						width: 100%;
						
						.title{
							width: 100%;
							padding: 40rpx 0;
							display: flex;
							justify-content: center;
							align-items: center;
							
							.text1{
								font-size: 40rpx;
							}
							.text2{
								font-size: 40rpx;
								font-weight: bold;
								color: #ff0000;
							}
							.text3{
								font-size: 50rpx;
								font-weight: bold;
								color: #ff0000;
							}
							
						}
						.notice_desc1{
							display: flex;
							padding-bottom: 30rpx;
							padding-left: 30rpx;
							padding-right: 30rpx;
							
							.text1{
								color: #232323;
								font-weight: bold;
							}
							.text2{
								color: #535353;
							}
							.text3{
								color: #232323;
								font-weight: bold;
							}
						}
						.notice_desc2{
							display: flex;
							padding-bottom: 30rpx;
							justify-content: space-between;
							padding-left: 30rpx;
							padding-right: 30rpx;
							
							.left{
								color: #9d9d9d;
								font-size: 26rpx;
							}
							.right{
								display: flex;
								color: #9d9d9d;
								font-size: 26rpx;
							}
						}
						
					}
					.list{
						flex: 1;
						width: 100%;
						
						.scroll{
							height: 100%;
						}
					}
					
				}
			}
		}
	}
</style>
